<template>
  <el-form label-width="80px" :model="skuList">
    <el-form-item label="SPU名称"> {{ spuList.spuName }} </el-form-item>
    <el-form-item label="SKU名称">
      <el-input placeholder="SKU名称" v-model="skuList.skuName"></el-input>
    </el-form-item>
    <el-form-item label="价格(元)">
      <el-input placeholder="价格(元)" v-model="skuList.price" type="number"></el-input>
    </el-form-item>
    <el-form-item label="重量(kg)">
      <el-input placeholder="重量(kg)" v-model="skuList.weight"></el-input>
    </el-form-item>
    <el-form-item label="规模描述">
      <el-input type="textarea" placeholder="规模描述" v-model="skuList.skuDesc"></el-input>
    </el-form-item>
 <el-form-item label="平台属性">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item :label="attr.attrName" v-for="attr in attrInfoList" :key="attr.id">
          <el-select placeholder="请选择" v-model="attr.attrAndvalueId" style="margin-bottom:10px">
            <el-option :label="attrvalue.valueName" :value="`${attr.id}:${attrvalue.id}`" 
            v-for="attrvalue in attr.attrValueList" :key="attrvalue.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="销售属性">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item :label="saleattr.saleAttrName" v-for="saleattr in spuSaleattrList" :key="saleattr.id">
          <el-select placeholder="请选择" v-model="saleattr.saleAndattrId">
            <el-option :label="attrvalue.saleAttrValueName" :value="`${saleattr.id}:${attrvalue.id}`" v-for="attrvalue in saleattr.spuSaleAttrValueList" :key="attrvalue.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>

    <el-form-item label="图片列表">
      <el-table border style="width: 100%" :data="imageList" @selection-change="handleSelectionChange">
        <el-table-column  label="" width="50" type="selection" >
        </el-table-column>
        <el-table-column  label="图片"> 
          <template slot-scope="{row}">
             <img :src="row.imgUrl" style="width:100px">
          </template>
         </el-table-column>
        <el-table-column prop="imgName" label="名称"></el-table-column>
        <el-table-column  label="操作" prop="skuDefaultImg">
          <template slot-scope="{row}">
            <el-button type="primary" size="mini" v-if="!row.isDefault" @click="changebut(row)">设为默认</el-button>
            <el-button type='success' size="mini" v-else @click="row.isDefault=false">默认</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item label="">
      <el-button type="primary" @click="sendskuInfo">保存</el-button>
      <el-button @click="changeshow">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
   name:'SkuForm',
   data(){
      return{
        //收集图片
        skuImagelist:[],
        isshowbtn:true,
        spuList:{},
        //存储销售属性
        spuSaleattrList:[],
        imageList:[],
        //存储平台属性
        attrInfoList:[],
        skuList:{
        //第一类父亲给数据
       "category3Id": 0,
        "spuId": 0,
       "tmId": 0,
       //第二类双向绑定v-model
       "price": '',
      "weight": "",
      "skuName": "",
      "skuDefaultImg": "",//默认图片
       "skuDesc": "",
       //平台属性
       "skuAttrValueList": [
        //  {
        //    "attrId": 0,
        //    "attrName": "string",
        //    "id": 0,
        //    "skuId": 0,
        //    "valueId": 0,
        //    "valueName": "string"
        //  }
       ],
       "skuImageList": [
        //  {
        //    "id": 0,
        //    "imgName": "string",
        //    "imgUrl": "string",
        //    "isDefault": "string",
        //    "skuId": 0,
        //    "spuImgId": 0
        //  }
       ],
       //销售属性
       "skuSaleAttrValueList": [
        //  {
        //    "id": 0,
        //    "saleAttrId": 0,
        //    "saleAttrName": "string",
        //    "saleAttrValueId": 0,
        //    "saleAttrValueName": "string",
        //    "skuId": 0,
        //    "spuId": 0
        //  }
       ],
     }
             }
           },
      
   methods:{
   async getSkulist(row,id1,id2,id3){
      this.spuList=row
      let Saleattrresult=await this.$API.spu.reqspuSaleattrList(row.id)
      if(Saleattrresult.code==200){
        this.spuSaleattrList=Saleattrresult.data
      }
      let imageresult=await this.$API.spu.reqImageList(row.id)
      if(imageresult.code==200){
       let list=imageresult.data
        list.forEach(item=>{
          item.isDefault=false
        })
        this.imageList=list
      }
      let attrlistesult=await this.$API.spu.reqattrInfoList(id1,id2,id3)
      if(attrlistesult.code==200){
        this.attrInfoList=attrlistesult.data
      }
    },
    //3.多选框发生改变触发
    changebut(row){
      this.imageList.forEach(item=>{
          if(item.id===row.id){
             item.isDefault=true
          }else{
             item.isDefault=false
          }
        })
      this.skuList.skuDefaultImg=row.imgUrl
      },
    //4.表格收集图片数据
    handleSelectionChange(params){
      this.skuImagelist=params
    },
     //5.保存sku发送请求
    async sendskuInfo(){
      
      this.skuList.category3Id=this.spuList.category3Id
      this.skuList.spuId=this.spuList.id
      this.skuList.tmId=this.spuList.tmId
      //整理平台属性数据

      this.attrInfoList.forEach(item=>{
        if(item.attrAndvalueId){
          const[attrId,valueId]=item.attrAndvalueId.split(":")
          this.skuList.skuAttrValueList.push({attrId,valueId})
        }
      
        
      })
      //整理销售属性数据
      this.skuList.skuSaleAttrValueList=this.spuSaleattrList.reduce((prev,item)=>{
        if(item.saleAndattrId){
          const[saleAttrId,saleAttrValueId]=item.saleAndattrId.split(":")
          prev.push({saleAttrId,saleAttrValueId})
        }
        return prev
      },[])
      //整理图片
      this.skuList.skuImageList=this.skuImagelist.map(item=>{
        return{
          imgName:item.imgName,
          imgUrl:item.imgUrl,
          isDefault:item.isDefault,
          spuImgId:item.id,
        }
      })
       let result=await this.$API.spu.reqSkuInfoList(this.skuList)
       if(result.code===200){
        this.$message({type:'success',message:'添加sku成功！'})
        this.$emit('changsence',0)
       }
    },



    //点击取消按钮
    changeshow(){
      this.$emit('changescene',0)
      //清除数据
      Object.assign(this._data,this.$options.data())
    }
      
    }
   }

</script>

<style>
</style>